<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/home.css">
</head>
<body>
    <!-- 头部 -->
    <header class="header">
        <img src="./img/Home/Home-Page.png" >
        <div class="juzhong">
            <!-- logo -->
            <div class="logo  wow fadeInUp" data-wow-delay="0ms">Webworld</div>

            <input type="checkbox" id="mobile" class="change" style="display: none;" />

            <label for="mobile">
                <span></span>
                <span></span>
                <span></span>
            </label>
            <!-- 导航 -->
            <nav class="menu ">
                <a href="./home.html" class="wow fadeInUp"  data-wow-delay="100ms">Home</a>
                <a href="./Inner.html"  class="wow fadeInUp"  data-wow-delay="200ms">Portfolio</a>
                <a href="./contact.html"  class="wow fadeInUp"  data-wow-delay="300ms">Contact</a>
            </nav>
        </div>

        <!-- 轮播图 -->
        <!-- 外层大盒子 -->
        <div class="lunbo" id="lunbo-boxs">

            <!-- 可见区域盒子 -->
            <div class="lunbo-boxs" >
                <!-- 左边按钮 -->
                <a class="left" id="left">
                    <span>&lt;</span>
                </a>
                <!-- 轮播图内容部分 -->
                <div class="lunbo-content">
                    <div class="item" id="item1" style="display: block;">
                        <div class="home-desc ">
                            <h1 class=" wow fadeInUp" data-wow-delay="0ms">1Clean, flat & polished design </h1>
                            <p class=" wow fadeInUp" data-wow-delay="100ms">Proin facilisis aliquam nunc quis varius.</p>
                            <a href="javascript:void(0)" class=" wow fadeInUp" data-wow-delay="200ms">SHOW MORE</a>
                        </div>
                    </div>
                    <div class="item" id="item2" style="display: none;">
                        <div class="home-desc ">
                            <h1 class=" wow fadeInUp" data-wow-delay="0ms">2Clean, flat & polished design </h1>
                            <p class=" wow fadeInUp" data-wow-delay="100ms">Proin facilisis aliquam nunc quis varius.</p>
                            <a href="javascript:void(0)" class=" wow fadeInUp" data-wow-delay="200ms">SHOW MORE</a>
                        </div>
                    </div>
                    <div class="item" id="item3" style="display: none;">
                        <div class="home-desc ">
                            <h1 class=" wow fadeInUp" data-wow-delay="0ms">3Clean, flat & polished design </h1>
                            <p class=" wow fadeInUp" data-wow-delay="100ms">Proin facilisis aliquam nunc quis varius.</p>
                            <a href="javascript:void(0)" class=" wow fadeInUp" data-wow-delay="200ms">SHOW MORE</a>
                        </div>
                    </div>
                </div>
                
                <!-- 右边的按钮 -->
                <a class="right" id="right">
                    <span>&gt;</span>
                </a>
            </div>

            <!-- 点部分 -->
            <div id="tsmore" class="lunbo-more  wow fadeInUp" data-wow-delay="300ms">
                <a href="javascript:void(0)"> <span></span> </a>
                <a href="javascript:void(0)"> <span></span> </a>
                <a href="javascript:void(0)"> <span></span> </a>
            </div>
        </div>

    </header>

    <div class="juzhong">

        <!-- 内容部分 -->
        <div class="content">
            <div class="desc wow fadeInUp" data-wow-delay="0ms" >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since type specimen book !!</div>
            <div class="client">
                <div class="client-demo wow fadeInUp" data-wow-delay="100ms">
                    <!-- 按钮 -->
                    <div class="btn bg1">
                        <div class="bgwhite">
                            <div class="bgblue">
                                <img src="./img/Home/clent-btn1.png">
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文字 -->
                    <div class="client-desc">
                        <h2>What We Are</h2>
                        <p>Lorem Ipsum is simply dummy text <br>
                            the printing and typesetting.</p>
                    </div>
                </div>

                <div class="client-demo wow fadeInUp" data-wow-delay="200ms">
                      <!-- 按钮 -->
                      <div class="btn bg2">
                        <div class="bgwhite">
                            <div class="bgblue">
                                <img src="./img/Home/clent-btn2.png">
                            </div>
                        </div>
                    </div>

                    <!-- 文字 -->
                    <div class="client-desc">
                        <h2>Start Our Project</h2>
                        <p>Lorem Ipsum is simply dummy text <br>
                            the printing and typesetting.
                        </p>
                    </div>
                </div>

                <div class="client-demo wow fadeInUp" data-wow-delay="300ms">
                      <!-- 按钮 -->
                      <div class="btn bg3">
                        <div class="bgwhite">
                            <div class="bgblue">
                                <img src="./img/Home/clent-btn3.png">
                            </div>
                        </div>
                    </div>
                    
                    <!-- 文字 -->
                    <div class="client-desc">
                        
                        <h2>Our Team</h2>
                        <p>Lorem Ipsum is simply dummy text <br>
                            the printing and typesetting.</p>
                    </div>
                </div>
            </div>

            <!-- feature -->
            <div class="features">
                <!-- features 标题 -->
                <div class="info">
                    <span><hr color="#e1e1e1" size="1"></span>
                        <div class="img">
                            <img src="./img/Home/info-logo1.png" class="wow fadeInUp" data-wow-delay="100ms">
                        </div>
                        
                    <span><hr color="#e1e1e1" size="1"></span>
                </div>
                <h2 class="info-title wow fadeInUp" data-wow-delay="200ms">   Our  <span>features</span>  </h2>
            
                <!-- 文字图片内容 -->
                <div class="features-box">
                    <div class="features-photo wow fadeInUp" data-wow-delay="300ms">
                        <img src="./img/Home/features-bg.png" >
                    </div>
                    <div class="features-juzhong">
                        <div class="features-title wow fadeInUp" data-wow-delay="400ms">
                            Lorem Ipsum is simply !!
                        </div>
                        <p class="features-desc wow fadeInUp" data-wow-delay="500ms">
                            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators.
                        </p>
                       
                        <a href="javascript:void(0)" class="feature-btn wow fadeInUp" data-wow-delay="600ms">READ MORE</a>
                        
                    </div>
                </div>
                <hr color="#e1e1e1" size="1px" style="margin-top: 3rem;">  
                <div class="features-box">
                    
                    <div class="features-juzhong">
                        <div class="features-title wow fadeInUp" data-wow-delay="100ms">
                            A flat Camera
                        </div>
                        <p class="features-desc wow fadeInUp" data-wow-delay="200ms">
                            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators.
                        </p>
                       
                        <a href="javascript:void(0)" class="feature-btn wow fadeInUp" data-wow-delay="300ms">READ MORE</a>
                        
                    </div>

                    <div class="features-photo fanxiang wow fadeInUp" data-wow-delay="400ms" >
                        <img src="./img/Home/features-bg2.png"  >
                    </div>
                </div>
            </div>
            
            <!-- projects -->
            <div class="projects">
                <!-- projects标题 -->
                <div class="info">
                    <span><hr color="#e1e1e1" size="1"></span>
                        <div class="img">
                            <img src="./img/Home/info-logo2.png" class="wow fadeInUp" data-wow-delay="100ms">
                        </div>
                        
                    <span><hr color="#e1e1e1" size="1"></span>
                </div>
                <h2 class="info-title wow fadeInUp" data-wow-delay="200ms">  our latest  <span>projects</span>  </h2>
                <p class="info-desc wow fadeInUp" data-wow-delay="300ms">Lorem Ipsum is simply dummy text the printing and typesetting.</p>
                
                <!-- projects内容 -->
                <div class="projects-boxs">
                    <div class="projects-item wow fadeInUp" data-wow-delay="400ms">
                        <div class="projests-black">
                            <div class="projects-photo photo1">
                                <img src="./img/Home/projects-search.png" alt="">
                            </div>
                        </div>
                        
                        <h2 class="projects-title">
                            Lorem Ipsum
                        </h2>
                        <p>Photography</p>
                    </div>
                    <div class="projects-item wow fadeInUp" data-wow-delay="500ms">
                        <div class="projests-black">
                            <div class="projects-photo photo2">
                                <img src="./img/Home/projects-search.png" alt="">
                            </div>
                        </div>
                        
                        <h2 class="projects-title">
                            Bonorum et Malorum
                        </h2>
                        <p>Print Designing</p>
                    </div>
                    <div class="projects-item wow fadeInUp" data-wow-delay="600ms">
                        <div class="projests-black">
                            <div class="projects-photo photo3">
                                <img src="./img/Home/projects-search.png" alt="">
                            </div>
                        </div>
                        
                        <h2 class="projects-title">
                            Injected humour
                        </h2>
                        <p>E-marketing</p>
                    </div>
                    <div class="projects-item wow fadeInUp" data-wow-delay="700ms">
                        <div class="projests-black">
                            <div class="projects-photo photo4">
                                <img src="./img/Home/projects-search.png" alt="">
                            </div>
                        </div>
                        
                        <h2 class="projects-title">
                            Embarrassing
                        </h2>
                        <p>Best Marketplace</p>
                    </div>
                </div>
            </div>
            
            <!-- Testimonials -->
            <div class="testimonials" id="abc">
                <!-- Testimonials 标题 -->
                <div class="info">
                    <span><hr color="#e1e1e1" size="1"></span>
                        <div class="img">
                            <img src="./img/Home/info-logo3.png" class="wow fadeInUp" data-wow-delay="100ms">
                        </div>
                        
                    <span><hr color="#e1e1e1" size="1"></span>
                </div>
                <h2 class="info-title wow fadeInUp" data-wow-delay="200ms">  client <span>Testimonials</span>  </h2>
                
                <div class="testimonials-item" id="tdemo1" style="display: block;">
                    <p class="test-desc wow fadeInUp" data-wow-delay="300ms">
                        1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since type specimen book !!
                    </p>
                    <p class="test-text wow fadeInUp" data-wow-delay="400ms"> <span>Robart Markel</span>, Company Name</p>
                </div>

                <div class="testimonials-item" id="tdemo2" style="display: none;">
                     <p class="test-desc wow fadeInUp" data-wow-delay="300ms">
                        2Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since type specimen book !!
                    </p>
                    <p class="test-text wow fadeInUp" data-wow-delay="400ms"> <span>Robart Markel</span>, Company Name</p>
                </div>

                <div class="testimonials-item" id="tdemo3" style="display: none;">
                     <p class="test-desc wow fadeInUp" data-wow-delay="300ms">
                        3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since type specimen book !!
                    </p>
                    <p class="test-text wow fadeInUp" data-wow-delay="400ms"> <span>Robart Markel</span>, Company Name</p>
                </div>

                <div class="testimonials-item" id="tdemo4" style="display: none;">
                     <p class="test-desc wow fadeInUp" data-wow-delay="300ms">
                        4Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since type specimen book !!
                    </p>
                    <p class="test-text wow fadeInUp" data-wow-delay="400ms"> <span>Robart Markel</span>, Company Name</p>
                </div>

                <div class="testimonials-item" id="tdemo5" style="display: none;">
                     <p class="test-desc wow fadeInUp" data-wow-delay="300ms">
                        5Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since type specimen book !!
                    </p>
                    <p class="test-text wow fadeInUp" data-wow-delay="400ms"> <span>Robart Markel</span>, Company Name</p>
                </div>

                <div class="test-more wow fadeInUp" data-wow-delay="500ms" id="test-more">
                    <a href="javascript:void(0)"></a>
                    <a href="javascript:void(0)"></a>
                    <a href="javascript:void(0)"></a>
                    <a href="javascript:void(0)"></a>
                    <a href="javascript:void(0)"></a>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="juzhong">
            <div class="footer-content wow fadeInUp" data-wow-delay="100ms">
                <span class="webword">webword</span>
                <p>
                    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of  
                </p>
                
            </div>
    
            <div class="footer-content wow fadeInUp" data-wow-delay="200ms">
                <span>contact</span>
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have</p>
                <ul>
                    <li>New Delhi</li>
                    <li>info@yourwebsite.com</li>
                    <li>890-09880-45590</li>
                </ul>
            </div>
    
            <div class="footer-content latest  wow fadeInUp" data-wow-delay="300ms">
                <span>latest&nbsp;tweets</span>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    <br>
                    <span class="aa">1 Hour Ago</span>
                </p>
                    
                <p>
                    Lorem Ipsum is simply dummy text of the printing
                    <br>
                    <span class="aa">1 Hour Ago</span>
                </p>
            
            </div>
    
            <div class="footer-content news  wow fadeInUp" data-wow-delay="400ms">
                <span>news&nbsp;letter</span>
                <p>Type your email address below and recive our daily news letter for free</p>
                <div class="go">
                    <input type="text" placeholder="Email Address">
                    <span>GO</span>
                </div>
            </div>

            
        </div>
        
    </div>

    <!-- 版权 -->
    <div class="copyright">
            <div class="juzhong">
                <p class="co-desc wow fadeInUp" data-wow-delay="100ms">© 2013 All rights reserved.  Theme by cssauthor.com</p>
                <div class="co-logo">
                    <img src="./img/Inner/111.png" class=" wow fadeInUp" data-wow-delay="200ms">
                    <img src="./img/Inner/222.png" class=" wow fadeInUp" data-wow-delay="300ms">
                    <img src="./img/Inner/333.png" class=" wow fadeInUp" data-wow-delay="400ms">
                </div>
            </div>
    </div>
    
</body>
</html>
<script src="./js/lunbot.js"></script>
<script src="./js/wow.min.js"></script>
<script>

var demo1 = document.getElementById("item1") ;
var demo2 = document.getElementById("item2") ;
var demo3 = document.getElementById("item3") ;
var boxs = document.getElementById("lunbo-boxs");
var more = document.getElementById("tsmore");
var alist = more.getElementsByTagName("a");

// console.log(alist)
alist[0].onmouseover = function(){
    demo2.style.display= "none";
    demo1.style.display= "block";
    demo3.style.display= "none";
    i=1
    
}
alist[1].onmouseover = function(){
    demo2.style.display= "block";
    demo1.style.display= "none";
    demo3.style.display= "none";

    i=2
    
}
alist[2].onmouseover = function(){
    i=0
    demo2.style.display= "none";
    demo1.style.display= "none";
    demo3.style.display= "block";
    
}


// var x = 
// if(demo1.style.display=="block"){
//     alist[0].style.borderColor="#fff"
//     alist[1].style.borderColor="transparent"
//     alist[2].style.borderColor="transparent"
// }
// if(demo2.style.display=="block"){
//     alist[1].style.borderColor="#fff"
//     alist[0].style.borderColor="transparent"
//     alist[2].style.borderColor="transparent"
// }
var left = document.getElementById('left')
var right = document.getElementById('right')
// console.log(left,right)

boxs.onmouseover =function(){
    clearInterval(timer)
}
boxs.onmouseleave = function(){
    timer = setInterval(times,3000)
}
var i=1
var timer = setInterval(times,5000)

function  times(){
    
    if(i==0){
        demo1.style.display= "block"
        demo2.style.display= "none";
        demo3.style.display= "none";
        //console.log(1)
    }
    if(i==1){
        demo1.style.display= "none";
        demo2.style.display= "block"
        demo3.style.display= "none";
        //console.log(2)
    }
    if(i==2){
        demo1.style.display= "none";
        demo2.style.display= "none";
        demo3.style.display= "block"
       //console.log(3)
    }
    i++;
    if(i>=3){
        i=0;
    }
}
left.onclick = function(){
    
    if(i==0){
        demo1.style.display= "block"
        demo2.style.display= "none";
        demo3.style.display= "none";
        //console.log(1)
    }
    if(i==1){
        demo1.style.display= "none";
        demo2.style.display= "block"
        demo3.style.display= "none";
        //console.log(2)
    }
    if(i==2){
        demo1.style.display= "none";
        demo2.style.display= "none";
        demo3.style.display= "block"
       //console.log(3)
    }
    i++;
    if(i>=3){
        i=0;
    }
}
right.onclick = function(){
    
    if(i==0){
        demo1.style.display= "block"
        demo2.style.display= "none";
        demo3.style.display= "none";
        //console.log(1)
    }
    if(i==1){
        demo1.style.display= "none";
        demo2.style.display= "block"
        demo3.style.display= "none";
        //console.log(2)
    }
    if(i==2){
        demo1.style.display= "none";
        demo2.style.display= "none";
        demo3.style.display= "block"
       //console.log(3)
    }
    i++;
    if(i>=3){
        i=0;
    }
}

    //初始化
    new WOW().init();
</script>